<template>
  <div class="consume" :class="{inRoom: source == 'room'}">
    <div class="consume-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="nonext" infinite-scroll-distance="10"
         infinite-scroll-immediate-check="false">
      <div class="consume-item flex" v-for="(item,index) in list" :key="index">
        <div class="content flex">
          <img :src="item.user.avatar" class="img" v-if="source == 'room'">
          <img :src="item.ware_image" class="img" v-else>
          <div class="desc">
            <p class="name" v-if="source == 'room'">{{setText(item.user.nickname)}}</p>
            <p class="name" v-else>{{setText(item.ware_name)}}</p>
            <p class="date">{{item.created_at}}</p>
          </div>
        </div>
        <div class="status success" :class="{roomSucc: source == 'room'}" v-if="item.operate_result==1">
          抓取成功
        </div>
        <div class="status" v-else>
          抓取失败
        </div>
      </div>
      <div class="noaddress" v-if="list.length==0">
        <p style="font-size:0.3rem;color:#999;margin-bottom:0.2rem;">您目前还没有任何抓取记录哦~</p>
      </div>
    </div>
  </div>
</template>
<script>
  import {InfiniteScroll} from 'mint-ui';
  import api from '@/assets/js/api';
  import Wx from '@/assets/js/weixin';
export default {
  data: function() {
    return {
      status: 0,
      list: [],
      show_rule: false,
      statusBgColor: "#71C671",
      page:1,
      nonext:false,

    }
  },
  props: ['source', 'id'],
  created: function() {
    Wx.hide();
    this.getlist();
  },
  methods: {
    getlist:function(){
      var smData={
        page:this.page,
        per_page:15,
      }
      var url = this.id ? `/api/machines/${this.id}/game-records` : '/api/game-records'
      api.fetch(url, {params: smData}).then((res) => {
      //api.fetch('http://jjl.cn/').then((res) => {
        if (res.meta.pagination.count > 0) {
          if (res.meta.pagination.per_page > res.meta.pagination.count) {
            this.nonext = true;
          }
          if (this.list.length == 0) {
            this.list = res.data;
          } else {
            this.list = this.list.concat(res.data);
          }
        }
      })
    },
    setText (text) {
      return text.length <= 10 ? text : text.substr(0, 10) + '...'
    },
    loadMore () {
      this.page++;
      this.getlist();
    }
  }
}

</script>
<style scoped lang="less">
.consume {
  background-color: #efefef;
  min-height: 100%;
  padding: 0.3rem 0.3rem 0;
  .noaddress {
    background: url("../../assets/images/plane.png") no-repeat 0.94rem 1.52rem;
    background-size: 4.99rem 2.67rem;
    text-align: center;
    padding-top: 5rem;
  }
  .consume-list {
    .consume-item {
      justify-content: space-between;
      padding: .3rem .4rem;
      background: #fff;
      height: 1.4rem;
      margin: 0 .3rem .3rem;
      border-radius: .18rem;
      .content {
        font-size: .3rem;
        color: #333;
        margin: .12rem 0;
        .img {
          width: .8rem;
          height: .8rem;
          min-width: 0.8rem;
          border-radius: 50%;
          overflow: hidden;
          margin-right: .3rem;
        }
        .desc {
          justify-content: flex-start;
          flex-direction: column;
        }
        .name {
          font-size: .28rem;
          color: #333;
          margin: .08rem 0;
          white-space: nowrap;
          overflow: hidden;
        }
        .date {
          color: #a3a3a3;
          font-size: .24rem;
        }
      }
      .status {
        color: #999;
        font-size: .28rem;
        min-width: 1.2rem;
        &.success {
          color: #29c956;
          background: none;
        }
        &.roomSucc {
          color: #29c956;
        }
      }
    }
  }
  &.inRoom {
    background-color:#fff;
    padding-top: 0;
    .consume-list .consume-item {
      margin: 0;
      padding: 0;
      border-radius: 0;
      border-bottom: 1px solid #e1e4eb;
    }
  }
}

</style>
